<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>

    //  1  2  4  3    5

    //  JS中代码 => 同步任务 和 异步任务
    //  同步任务 => 在主线程 按步骤 按顺序执行

    //  异步任务 => 不进入主线程 而是先存入任务队列 => 只有任务队列通知主线程 某个异步任务 可以执行了 该任务 才会进入主线程执行 

    // 异步任务  => 宏任务和微任务
    // 宏任务 (ajax setTimeout setInterval)
    // 微任务 (promise实例.then().catch()的回调函数)


    // JS的代码执行流程 :
    // 1. 先执行主线程上所有的同步任务  => 异步任务放到任务队列中(宏任务队列和微任务队列)
    // 2. 主线程结束,先清空微任务队列 => 放到主线程执行
    // 3. 微任务队列清空完毕,找到宏任务队列首位的任务 => 放到主线程执行
    // 4. 重复 2-3 步骤 (每执行一个宏任务 => 都要把微任务队列清空一遍)

    // 先执行主线程
    // 主线程结束 => 清空微任务队列 (同时有多个 依次执行)
    // 任务队列清空完毕, 每执行一个宏任务 => 都要把微任务队列清空一遍

    // 注意:在执行微队列microtask queue中任务的时候，如果又产生了microtask，那么会继续添加到队列的末尾，也会在这个周期执行，直到microtask queue为空停止。



    console.log(1);
    setTimeout(() => {  //callback1

        console.log(2);
        Promise.resolve().then(() => {  //callback7

            console.log(3)
        });
    });

    new Promise((resolve, reject) => {

        console.log(4)
        resolve(5)
    }).then((data) => {  // callback2

        console.log(data);

        Promise.resolve().then(() => {  // callback4

            console.log(6)
        }).then(() => {      // callback5

            console.log(7)

            setTimeout(() => {   // callback6

                console.log(8)
            }, 0);
        });
    })

    setTimeout(() => {  // callback3

        console.log(9);
    })

    console.log(10);





</script>

</html>